<template>
  <div>
    <div>
      <div class="toolbar">
        <el-form :inline="true" :model="q" size="mini">
          <el-form-item label="投诉时间">
            <el-date-picker
              v-model="q.created_at_begin"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
            -
            <el-date-picker
              v-model="q.created_at_end"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用户ID:">
            <el-input v-model="q.user_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item label="投诉代理:">
            <el-select v-model="q.agency_id" clearable filterable placeholder="选择投诉代理">
              <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
                         :value="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉类型:">
            <el-select v-model="q.complaint_types" clearable placeholder="请选择">
              <el-option
                v-for="item in complaintTypes"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="所属总代:">
            <el-input v-model="q.parent_name" placeholder="所属总代" prefix-icon="el-icon-edit"></el-input>
          </el-form-item> -->
          <el-form-item label="所属商户:">
            <el-select v-model="q.mch_id" clearable placeholder="请选择">
              <el-option
                v-for="item in MerchantsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态:">
            <el-select v-model="q.has_done" clearable placeholder="请选择">
              <el-option
                v-for="(val,name) in {'已处理':'true','待处理':'false'}"
                :key="name"
                :label="name"
                :value="val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="danger" @click="reload">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="listData.items"
      v-loading.body="listLoading"
      @sort-change="sortlist"
      size="mini"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" label="投诉ID" width="80"></el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="150"></el-table-column>
      <el-table-column prop="mch_name" label="所属商户" width="180">
        <template slot-scope="scope">{{scope.row.mch.name}}</template>
      </el-table-column>
      <el-table-column prop="agency_nickname" label="投诉代理" width="150">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <!-- <el-table-column prop="parent_name" label="所属总代" width="160">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column> -->
      <el-table-column prop="mch_id" label="商户ID" width="100"></el-table-column>
      <el-table-column
        prop="complaint_types"
        label="投诉类型"
        width="150"
        :formatter="FormatterComplaintType"
      ></el-table-column>
      <el-table-column prop="images" label="附件" width="160">
        <template slot-scope="scope">
          <div>
            <span style="margin:0 5px;cursor:pointer;color:#42b983" @click="openImage(url)" v-for="(url,index) in scope.row.images" :key="url">{{`图片${index+1}`}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="complaint_content" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column prop="created_at" label="投诉时间" width="180"></el-table-column>
      <el-table-column prop="has_done" label="处理状态" width="180">
        <template slot-scope="scope">{{scope.row.has_done?'已处理':'待处理'}}</template>

      </el-table-column>
      <el-table-column prop="updated_at" label="最后更新时间" width="180"></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <div>
            <!--<el-button :type="scope.row.has_done?'success':'primary'" size="mini"  @click="relpy(scope.row)">{{scope.row.has_done?'查看':'处理'}}</el-button>-->
             <el-button type="primary" size="mini"  @click="showImInfo(scope.row)">聊天记录</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr"
        :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listData.total"
      ></el-pagination>
    </div>

    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :AgencyType="AgencyType" :agencyNickname="agencyNickname"
                 :has_done="has_done" :complaintTypes="complaintTypes" :MerchantsList="MerchantsList"></save-update>
                 <service-iframe v-if="showServiceIframe" :showServiceIframe.sync="showServiceIframe" :ImInfo="ImInfo"></service-iframe>

  </div>
</template>

<script>
  import {getComplaintList, getAgencyList} from "@/api";
  import {queryFilter} from "@/utils/patch";
  import saveUpdate from "./saveUpdate";
import serviceIframe from "./serviceIframe";
  import { getURL } from '@/api/img'

  export default {
    components: {
    saveUpdate,serviceIframe
    },
    data() {
      return {
        showServiceIframe: false,
        topicId: null,
        agencyNickname:null,
        listData: {},
      ImInfo: {},
        q: {page_size: 30, page_no: 1, agency_type: 2},
        listLoading: false,
        showUpdate: false,
        settleCycle: this.$store.state.app.settleCycle,
        show_id: null,
        MerchantsList: this.$store.state.user.userinfo.mchs,
        AgencyList: [],
        AgencyType: this.$store.state.app.AgencyType,
        isEnable: false,
        isShow: false,
        searchTime: [new Date(), new Date()],
        score: 0,
        has_done: null,
        starOptions: [
          {value: 1, label: 1},
          {value: 2, label: 2},
          {value: 3, label: 3},
          {value: 4, label: 4},
          {value: 5, label: 5}
        ],
        complaintTypes: [
          {id: 1, value: "充值未到账"},
          {id: 2, value: "态度恶劣"},
          {id: 5, value: "给其他游戏打广告"},
          {id: 6, value: "不当言论"},
          {id: 4, value: "其他"}
        ]
      };
    },
    activated() {
      this.getList();
      this.getChildAgencyList()
    },
    deactivated() {
      this.listLoading = false;
    },
    methods: {
      query() {
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30});
        this.getList();
      },
      reload() {
        this.q = {page_size: 30, page_no: 1};
        this.searchTime = [];
        this.getList();
      },
      relpy(row) {
        this.show_id = row.id
        this.has_done = row.has_done
        this.agencyNickname = row.agency.user_name
        this.showUpdate = true
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop;
        this.getList();
      },
      handleSizeChange(val) {
        this.q.page_size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.q.page_no = val;
        this.getList();
      },
      getList() {
        queryFilter(this.q);
        getComplaintList(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false;
            this.listData = res.data;
          }
        });
      },
      getChildAgencyList () {
        getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
          if (res.status === 0) {
            this.AgencyList = res.data.items
          }
        })
      },
      typeFormartter(row, column) {
        let columnName = column.property;
        if (columnName === "use_vcode") {
          return row.use_vcode ? "是" : "否";
        } else if (columnName === "enable") {
          return row.enable ? "是" : "否";
        } else if (columnName === "working") {
          return row.working ? "是" : "否";
        }
      },
      exportExcel() {
        this.$message({message: "待开发", type: "error"});
      },
      FormatterComplaintType(row, colum) {
        var result = [];
        row.complaint_types.forEach(function (item) {
          switch (item) {
            case 1:
              result.push("充值未到账");
              break;
            case 2:
              result.push("态度恶劣");
              break;
            case 5:
              result.push("给其他游戏打广告");
              break;
            case 6:
              result.push("不当言论");
              break;
            case 4:
              result.push("其他");
              break;
          }
        });
        return result.toString();
      },
      showImInfo(row) {
      this.ImInfo = row
        this.showServiceIframe = true
      },
      openImage(item){
        const key =  item.split('?')[0];
            getURL(key).then(res=>{
              const d = res.data;
              if(d.status == 0){
                const url = d.data.urls[0].url;
                if(url) window.open(url,'__blank');
              }
          })
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList();
        }
      }
    }
  };
</script>
